<template>
  <div class="homepage">
    <div class="banner" style="position:relative">
      <!-- 右侧 公告 下载APP 微信 -->
      <div class="home-prop-wrap">
        <div v-if="notices.length" class="prop-item notice">
          <div class="prop-head">
            <div class="item-icon"></div>
            公告
          </div>
          <div class="prop-content" @click="noticeDialogVisible = true">
            <p class="title" style="font-size:15px;margin-bottom:5px;">{{notices[0].title}}</p>
            <div class="content" style="font-size:13px;">{{notices[0].content | clearHTMLTag}}</div>
            <div class="mask"></div>
          </div>
        </div>
        <div class="prop-item app">
          <div class="prop-head">
            <div class="item-icon"></div>
            APP
          </div>
          <div class="prop-content">
            <!-- <div class="qidai"><span>敬请期11待</span></div> -->
            <img src="@/assets/images/layout/app_qrcode.png" alt="">
          </div>
        </div>
        <div class="prop-item wechat">
          <div class="prop-head">
            <div class="item-icon"></div>
            微信
          </div>
          <div class="prop-content">
            <img src="@/assets/images/layout/footer-qrcode.jpg" alt="">
          </div>
        </div>
        <div class="prop-item app">
          <div class="prop-head">
            <div class="item-icon"></div>
            微博
          </div>
          <div class="prop-content" style="top:unset;bottom:2px;">
            <img src="@/assets/images/home/weibo.png" alt="">
          </div>
        </div>

      </div>

      <!-- 鼠标滚动 -->
      <div class="scroll-tip cursor-point" @click="moveNextScrenn">
        <!-- <img class="mouse" src="@/assets/images/home/mouse.png" alt=""> -->
        <!-- <img class="home-arrow arrow1" src="@/assets/images/home/arrow-down.png" alt="">
        <img class="home-arrow arrow2" src="@/assets/images/home/arrow-down.png" alt="">
        <img class="home-arrow arrow3" src="@/assets/images/home/arrow-down.png" alt=""> -->
        <i class="el-icon-arrow-down color-white xui-display-block arrow1"></i>
        <i class="el-icon-arrow-down color-white xui-display-block arrow2"></i>
        <i class="el-icon-arrow-down color-white xui-display-block arrow3"></i>
      </div>

      <!-- 轮播图 -->
      <swiper :options="swiperOption" v-if="banners.length > 0">
        <swiper-slide v-for="(banner,index) in banners" class="swiper-slide" :style="{height:`${clientHeight}px`}" :key="`bannder${index}`">
          <a class="xui-block" :href="banner.url" target="_blank">
            <div class="slide-item" :style="{height:`${clientHeight}px`, backgroundImage:`url(${banner.picUrl})`}"></div>
          </a>
        </swiper-slide>
        <div class="swiper-pagination swiper-pagination-bullets" slot="pagination"></div>
        <div class="building-wrap building-top" style="width:1596px;">
          <img :src="buildingTopPic" alt="" style="width:100%;">
        </div>
      </swiper>
    </div>

    <!-- 快速入口 -->
    <div class="entry-block">
      <div class="building-wrap building-bottom" style="width:1596px;">
        <img class="buildingPic" ref="buildingPic" :src="buildingBottomPic[buildPicIndex]" alt="快速入口" style="width:100%;"
          usemap="#building">
        <map name="building" id="building">
          <area id="poly1" class="" shape="poly" :coords="coordsBySize[0]" href="javascript:void(0);" @click="$router.push('/Visit/appointment')"
            @mouseover="activatePoly(1)" @mouseout="frozenPoly" alt="">
          <area id="poly2" class="" shape="poly" :coords="coordsBySize[1]" href="javascript:void(0);" @click="$router.push('/study')"
            @mouseover="activatePoly(2)" @mouseout="frozenPoly" alt="">
          <area id="poly3" class="" shape="poly" :coords="coordsBySize[2]" href="http://beixinbc.com/cbwg/" target="_blank"
            @mouseover="activatePoly(3)" @mouseout="frozenPoly" alt="">
          <area id="poly4" class="" shape="poly" :coords="coordsBySize[3]" href="javascript:void(0);" @click="$router.push('/Collection/appreciation')"
            @mouseover="activatePoly(4)" @mouseout="frozenPoly" alt="">
        </map>
        <!-- 黄色区域 -->
        <div class="buildingBg" :class="[{'active-1':buildPicIndex === 1}]"></div>
        <div class="buildingBg" :class="[{'active-2':buildPicIndex === 2}]"></div>
        <div class="buildingBg" :class="[{'active-3':buildPicIndex === 3}]"></div>
        <div class="buildingBg" :class="[{'active-4':buildPicIndex === 4}]"></div>
        <!-- 标题 -->
        <div class="building-title-wrap">
          <a class="cursor-point" href="javascript:void(0)" @click="$router.push('/Visit/appointment')" @mouseover="activatePoly(1)"
            @mouseout="frozenPoly">
            <div class="building-title title-1" :class="{'active':buildPicIndex === 1}">
              <h3>参观预约</h3>
              <p>VISIT APPOINTMENT</p>
            </div>
            <!-- <img src="@/assets/images/home/title-photo-1.png" alt="" class="title-photo photo-1 " :class="{'active': buildPicIndex === 1}" > -->
            <img src="@/assets/images/home/title-photo-1-a.png" alt="" class="title-photo photo-1 " :class="{'active': buildPicIndex === 1}">
          </a>
          <a class="cursor-point" href="javascript:void(0)" @click="$router.push('/study')" @mouseover="activatePoly(2)"
            @mouseout="frozenPoly">
            <div class="building-title title-2" :class="{'active':buildPicIndex === 2}">
              <h3>活动日历</h3>
              <p>EVENTS CALENDAR</p>
            </div>
            <!-- <img src="@/assets/images/home/title-photo-2.png" alt="" class="title-photo photo-2 " :class="{'active': buildPicIndex === 2}" > -->
            <img src="@/assets/images/home/title-photo-2-a.png" alt="" class="title-photo photo-2 " :class="{'active': buildPicIndex === 2}">
          </a>
          <a class="cursor-point" href="http://111.8.37.194:2345/webgl3-pop/" target="_blank" @mouseover="activatePoly(3)"
            @mouseout="frozenPoly">
            <div class="building-title title-3" :class="{'active':buildPicIndex === 3}">
              <h3>虚拟漫游</h3>
              <p>VIEW NAVIGATION</p>
            </div>
            <!-- <img src="@/assets/images/home/title-photo-3.png" alt="" class="title-photo photo-3 " :class="{'active': buildPicIndex === 3}" > -->
            <img src="@/assets/images/home/title-photo-3-a.png" alt="" class="title-photo photo-3 " :class="{'active': buildPicIndex === 3}">
          </a>
          <a class="cursor-point" href="javascript:void(0)" @click="$router.push('/Collection/appreciation')"
            @mouseover="activatePoly(4)" @mouseout="frozenPoly">
            <div class="building-title title-4" :class="{'active':buildPicIndex === 4}">
              <h3>精品赏析</h3>
              <p>CLASSIC APPRECIATION</p>
            </div>
            <img src="@/assets/images/home/title-photo-4.png" alt="" class="title-photo photo-4 " :class="{'active': buildPicIndex === 4}">
          </a>
        </div>
      </div>
    </div>

    <!-- main -->
    <div class="main">
      <div class="container">
        <div class="xui-margin-vertical xui-text-center">
          <img src="@/assets/images/home/logo-black.png" alt="">
          <p class="xui-margin-top-sm color-gray slogen">
            <span class="wing slogen-left"></span>
            <span>省会地标</span>
            <span>长沙客厅</span>
            <span>百姓乐园</span>
            <span>文化圣殿</span>
            <span class="wing slogen-right"></span>
          </p>
        </div>
        <div class="xui-fc xui-grid-avg-3 xui-margin-top-lg">
          <div class="xui-padding-horizontal-md">
            <!-- 最新资讯 -->
            <div class="home-block news-block">
              <div class="home-block-hd xui-text-center">
                <h3>最新资讯</h3>
                <p>NEWS</p>
              </div>
              <div class="home-block-bd">
                <ul>
                  <li class="home-news-item" v-for="(item,index) in news" :key="`news-${index}`">
                    <div class="date-box">
                      <h4>{{item.publishDate.split('-')[2]}}</h4>
                      <p>{{item.publishDate.split('-')[0]}}-{{item.publishDate.split('-')[1]}}</p>
                    </div>
                    <router-link class="home-news-item-content xui-text-truncate-line-2" v-if="item.navigationName == '文博资讯'"
                      :to="`/Information/Information-list-23/detail/${item.id}`" style="height:44px">{{item.title}}</router-link>
                    <router-link class="home-news-item-content xui-text-truncate-line-2" v-else :to="`/Information/Information-list-42/detail/${item.id}`"
                      style="height:44px">{{item.title}}</router-link>
                  </li>
                </ul>
                <router-link to="/Information/Information-list-23/" class="more-btn xui-margin-top-xl">READ MORE</router-link>
              </div>
            </div>
          </div>
          <div class="xui-padding-horizontal-md">
            <div class="home-block guide-block">
              <div class="home-block-hd xui-text-center">
                <h3>参观指南</h3>
                <p>GUIDE</p>
              </div>
              <div class="home-block-bd">
                <div class="visit-time">
                  <div class="title">参观时间</div>
                  <div class="time-content xui-fc">
                    <div class="grey-box xui-fc">
                      <div class="xui-fl xui-text-center">
                        <div>
                          <span class="hour">9</span>
                          <span class="min">:00</span>
                        </div>
                        <p style="color:#666;position:relative; top:-15px">开馆时间</p>
                      </div>
                      <div class="xui-fl line"></div>
                      <div class="xui-fl xui-text-center">
                        <div>
                          <span class="hour">16</span>
                          <span class="min">:30</span>
                        </div>
                        <p style="color:#666;position:relative; top:-15px">停止入馆</p>
                      </div>
                      <div class="xui-fl line"></div>
                      <div class="xui-fl xui-text-center">
                        <div>
                          <span class="hour">17</span>
                          <span class="min">:00</span>
                        </div>
                        <p style="color:#666;position:relative; top:-15px">闭馆时间</p>
                      </div>
                    </div>
                  </div>
                </div>
                <p class="color-darken-gray time-tip">周一(国家法定节假日除外)及农历除夕、正月初一、正月初二闭馆</p>
                <div class="address-info-box">
                  <p class="xui-margin-left-xl">
                    <span class="xui-font-size-sm color-primary">地　　址:</span>
                    <span class="xui-font-size-sm">湖南省长沙市开福区新河三角洲滨江文化园内
                      <a href="http://j.map.baidu.com/uvqII" target="_blank" class="el-icon-location color-primary"></a>
                    </span>
                  </p>
                  <p class="xui-margin-left-xl">
                    <span class="xui-font-size-sm color-primary">公交路线:</span>
                    <span class="xui-font-size-sm">2、237、357、520、804、906路（北辰时代广场）520、804路(滨江文化园)</span>
                  </p>
                  <p class="xui-margin-left-xl">
                    <span class="xui-font-size-sm color-primary">地铁路线:</span>
                    <span class="xui-font-size-sm">北辰三角洲站（地铁一号线）</span>
                  </p>
                  <p class="xui-margin-left-xl">
                    <span class="xui-font-size-sm color-primary">咨询电话:</span>
                    <span class="xui-font-size-sm">0731-82892350/82892360</span>
                  </p>
                  <p class="xui-margin-left-xl color-gray">请携带有效身份证件，如身份证、学生证、港澳通行证、护照、 老年证等入馆参观。亦可通过扫描官微二维码预约参观。</p>
                </div>
              </div>
            </div>
          </div>
          <div class="xui-padding-horizontal-md">
            <router-link class="img-link item1" to="/Exhibition/current">
              <div class="title-wrap">
                <h2 class="color-white xui-margin-bottom-0">湘江北去/中流击水</h2>
                <p class="color-white xui-font-size-lg">——长沙历史文化陈列</p>
                <p class="color-white xui-font-size-xs">CHANGSHA HISTORY AND CULTURE</p>
              </div>
              <img-box width="100%" height="189" :imgSrc="imgLink1"></img-box>
            </router-link>
            <!-- <router-link class="img-link item2" to="/study/guide" style="margin-top:16px;">
              <div class="title-wrap">
                <h2 class="color-white xui-margin-bottom-0">学习资源</h2>
                <p class="color-white xui-font-size-xs">LEARNING RESOURCE</p>
              </div>
              <img-box width="100%" height="189" :imgSrc="imgLink2"></img-box>
            </router-link> -->
            <div class="img-link item2" style="margin-top:16px;" @click="showBuilding('学习资源正在建设中。')">
              <div class="title-wrap">
                <h2 class="color-white xui-margin-bottom-0">学习资源</h2>
                <p class="color-white xui-font-size-xs">LEARNING RESOURCE</p>
              </div>
              <img-box width="100%" height="189" :imgSrc="imgLink2"></img-box>
            </div>
            <div class="img-link item3" style="margin-top:16px;" @click="showBuilding('长沙文化地理正在建设中。')">
              <!-- <div class="img-link item3" style="margin-top:16px;"  @click="openUrl('http://172.16.102.27:8082/landmark/web/#/home')"> -->
              <div class="title-wrap">
                <h2 class="color-white xui-margin-bottom-0">长沙文化地理</h2>
                <p class="color-white xui-font-size-xs"> CHANGSHA CULTURAL OVERVIEW</p>
              </div>
              <img-box width="100%" height="189" :imgSrc="imgLink3"></img-box>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 公告提示框 -->
    <el-dialog v-if="notices.length" title="公告" :visible.sync="noticeDialogVisible" width="600px">
      <div v-html="notices[0].content"></div>
    </el-dialog>
  </div>
</template>
<script>
  import headerNav from "@/components/container/headerForHome";
  import {
    swiper,
    swiperSlide
  } from "vue-awesome-swiper";
  import "@/assets/css/home.less";
  import imgBox from "@/components/widge/img-box";
  import buildingBottomPic from "@/assets/images/home/building-bottom.png";
  import buildingBottomPic1 from "@/assets/images/home/building-bottom-1.png";
  import buildingBottomPic2 from "@/assets/images/home/building-bottom-2.png";
  import buildingBottomPic3 from "@/assets/images/home/building-bottom-3.png";
  import buildingBottomPic4 from "@/assets/images/home/building-bottom-4.png";
  import buildingActivePic1 from "@/assets/images/home/building-active-1.png";
  import buildingActivePic2 from "@/assets/images/home/building-active-2.png";
  import buildingActivePic3 from "@/assets/images/home/building-active-3.png";
  import buildingActivePic4 from "@/assets/images/home/building-active-4.png";
  import imgLink1 from "@/assets/images/home/img-link-1.png";
  import imgLink2 from "@/assets/images/home/img-link-2.png";
  import imgLink3 from "@/assets/images/home/img-link-3.jpg";
  import buildingTopPic from "@/assets/images/home/building-top.png";
  import {
    removeClass,
    addClass,
    hasClass,
    filterHTMLTag
  } from "@/utils";
  import {
    getNotice
  } from "@/api/detail";
  import {
    getBanner,
    getList,
    getHomeList
  } from "@/api/list";
  import {
    rootsUrl,
    scroll,
    IEVersion
  } from "@/utils";

  export default {
    components: {
      headerNav,
      swiper,
      swiperSlide,
      imgBox
    },
    data() {
      return {
        banners: [],
        activeIndex: 1,
        buildingTopPic,
        imgLink1,
        imgLink2,
        imgLink3,
        buildingBottomPic: [
          buildingBottomPic,
          buildingBottomPic1,
          buildingBottomPic2,
          buildingBottomPic3,
          buildingBottomPic4
        ],
        buildingActivePic: [
          "",
          buildingActivePic1,
          buildingActivePic2,
          buildingActivePic3,
          buildingActivePic4
        ],
        buildPicIndex: 0,
        swiperOption: {
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
            bulletClass: "my-bullet",
            bulletActiveClass: "my-swiper-pagination-bullet-active"
          },
          spaceBetween: 30,
          autoplay: {
            delay: 5000,
            disableOnInteraction: false,
            stopOnLastSlide: false
          },
          loop: true,
          effect: "fade",
          // navigation: {
          //   nextEl: ".swiper-button-next",
          //   prevEl: ".swiper-button-prev"
          // },
          on: {
            slideChangeTransitionEnd: function () {
              let items = document.querySelectorAll(".swiper-slide");
              let activeItem = document.querySelectorAll(".swiper-slide")[
                this.activeIndex
              ].firstChild;
              for (let i = 1; i < items.length; i++) {
                removeClass(items[i].firstChild, "scale");
              }
              addClass(activeItem, "scale");
            }
          }
        },
        clientHeight: this.getClientHeight(),
        coords: {
          poly1: "134,0,635,124,0,296",
          poly2: "635,124,0,296, 754,296",
          poly3: "754,296,635,124,1183,0,1083,296",
          poly4: "1083,296,1183,0,1527,103,1565,296"
        },
        news: [],
        notices: [],
        noticeDialogVisible: false
      };
    },
    methods: {
      getClientHeight() {
        let clientHeight = 0;
        if (document.body.clientHeight && document.documentElement.clientHeight) {
          clientHeight =
            document.body.clientHeight < document.documentElement.clientHeight ?
            document.body.clientHeight :
            document.documentElement.clientHeight;
        } else {
          clientHeight =
            document.body.clientHeight > document.documentElement.clientHeight ?
            document.body.clientHeight :
            document.documentElement.clientHeight;
        }
        return clientHeight;
      },
      activatePoly(polyIndex) {
        // 1. 图片变颜色
        this.buildPicIndex = polyIndex;
        // 2. 标题文字位移+变色

        // 3. 文物淡入
      },
      frozenPoly(event) {
        this.buildPicIndex = 0;
      },
      getNews() {
        getHomeList().then(res => {
          this.news = res.data.recordsList;
        });
      },
      getNotice() {
        getNotice().then(res => {
          if (res.data.recordsList.length > 0) {
            this.notices = res.data.recordsList;
          }
        });
      },
      getBanner() {
        getBanner().then(res => {
          this.banners = res.data.recordsList;
        });
      },
      showBuilding(str) {
        this.$alert(str, "正在建设", {
          confirmButtonText: "确定"
        });
      },
      openUrl(url) {
        window.open(url);
      },
      moveNextScrenn() {
        let isIe = IEVersion() !== -1 ? true : false;
        console.log(IEVersion());
        if (isIe) {
          window.scrollTo(0, this.clientHeight);
        } else {
          const currentY =
            document.documentElement.scrollTop || document.body.scrollTop;
          scroll(currentY, this.clientHeight);
        }
      }
    },
    computed: {
      coordsBySize() {
        let lg = [
          [134, 0, 635, 124, 0, 296],
          [635, 124, 0, 296, 754, 296],
          [754, 296, 635, 124, 1183, 0, 1083, 296],
          [1083, 296, 1183, 0, 1527, 103, 1565, 296]
        ];

        function getScaledCoords(baseCoords, ratio) {
          let arr = Object.assign([], baseCoords);
          arr.forEach(item => {
            for (let i = 0; i < item.length; i++) {
              item[i] *= ratio;
            }
          });
          return arr;
        }
        const getWinWidth = function () {
          if (window.innerWidth) {
            return window.innerWidth;
          } else if (document.body && document.body.clientWidth) {
            return document.body.clientWidth;
          }
        };
        let winWidth = getWinWidth();

        let result = lg;
        if (winWidth < 1399) {
          result = getScaledCoords(lg, 1200 / 1596);
        } else if (winWidth > 1400 && winWidth <= 1599) {
          result = getScaledCoords(lg, 1400 / 1596);
        } else if (winWidth > 1559) {
          result = lg;
        }
        return result;
      },
      root() {
        return window.location.host;
      }
    },
    mounted() {
      this.clientHeight = this.getClientHeight();
      this.getNews();
      this.getNotice();
      this.getBanner();
    },
    filters: {
      clearHTMLTag(value) {
        return filterHTMLTag(value);
      }
    }
  };

</script>

<style lang="less" scoped>
</style>
